<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" i18n>Block</li>
    <li class="breadcrumb-item active"
        aria-current="page" i18n>Mirroring</li>
  </ol>
</nav>

<cd-view-cache [status]="status"></cd-view-cache>

<div class="row">
  <div class="col-sm-6">
    <fieldset>
      <legend i18n>Daemons</legend>

      <cd-table [data]="daemons.data"
                columnMode="flex"
                [columns]="daemons.columns"
                [autoReload]="30000"
                (fetchData)="refresh()">
      </cd-table>
    </fieldset>
  </div>

  <div class="col-sm-6">
    <fieldset>
      <legend i18n>Pools</legend>

      <cd-table [data]="pools.data"
                columnMode="flex"
                [autoReload]="0"
                (fetchData)="refresh()"
                [columns]="pools.columns">
      </cd-table>
    </fieldset>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <fieldset>
      <legend i18n>Images</legend>
      <tabset>
        <tab heading="Issues" i18n-heading>
          <cd-table [data]="image_error.data"
                    columnMode="flex"
                    [autoReload]="0"
                    (fetchData)="refresh()"
                    [columns]="image_error.columns">
          </cd-table>
        </tab>
        <tab heading="Syncing" i18n-heading>
          <cd-table [data]="image_syncing.data"
                    columnMode="flex"
                    [autoReload]="0"
                    (fetchData)="refresh()"
                    [columns]="image_syncing.columns">
          </cd-table>
        </tab>
        <tab heading="Ready" i18n-heading>
          <cd-table [data]="image_ready.data"
                    columnMode="flex"
                    [autoReload]="0"
                    (fetchData)="refresh()"
                    [columns]="image_ready.columns">
          </cd-table>
        </tab>
      </tabset>
    </fieldset>
  </div>
</div>

<ng-template #healthTmpl
             let-row="row"
             let-value="value">
  <span [ngClass]="row.health_color | mirrorHealthColor">{{ value }}</span>
</ng-template>

<ng-template #stateTmpl
             let-row="row"
             let-value="value">
  <span [ngClass]="row.state_color | mirrorHealthColor">{{ value }}</span>
</ng-template>

<ng-template #syncTmpl>
  <span class="label label-info">Syncing</span>
</ng-template>

<ng-template #progressTmpl
             let-value="value">
  <progressbar type="info"
               [value]="value">
  </progressbar>
</ng-template>
